<!DOCTYPE html>
<html lang="en">
{% load static%}
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>注册</title>
      <link rel="icon" href="{% static 'xny.ico' %}" type="image/x-icon">
    <!-- <link rel="stylesheet" href="text.css" /> -->
      <script type="text/javascript" src="{% static 'js/md5-min.js' %}"></script>
        <script src="{% static 'js/jquery.min.js' %}"></script>
  </head>
  <style>
    .all {
      width: 800px;
      box-shadow: 10px -10px 25px  rgba(210, 210, 210, 0.9);
      margin: auto;
      margin-top: 5%;
      display: flex;
      border-radius: 35px;
      background-color: rgba(223, 224, 225, 0.7);
      height: 550px;
    }
    .log {
      width: 50%;
      margin: auto;
    }
    .reg {
      width: 50%;
      height: 100%;
      margin: auto;
      background-color: #f0f0f0;
      border-radius: 35px;
      color: #ffffff;
    }
    .reg_1 {
      text-align: center;
      margin: auto;
      margin-top: 35%;
    }
    .reg_1 h2 {
      font-weight: 700;
    }
    .reg_1 p {
      margin: 15px 0px 25px 0px;
    }
    .sig {
      width: 180px;
      height: 60px;
      border-radius: 30px;
      background-image: linear-gradient(to right, #084298, #0b5ed7);
      border-color: #fff;
      color: #ffffff;
        margin-left: 18px;
        margin-top: 20px;
    }
    #tiao {
      padding: 0em 0;
    }
    .reg_1 a {
      color: #ffffff;
    }
    h3 {
      font-size: 3em;
      color: black;
      padding-bottom: 1em;
      margin: 0;
      text-align: center;
      font-family: "Marvel-Regular";
    }
    .input {
      margin: 0px 50px;
      width: 300px;
      height: 70px;
    }
    span {
      color: #999;
      font-size: 0.85em;
      padding-bottom: 0.2em;
      display: block;
      text-transform: uppercase;
      margin-bottom: 4px;
    }
    .ll {
      border: 1px solid #555;
      outline-color: #fd9f3e;
      width: 90%;
      font-size: 1em;
      padding: 0.5em;
      line-height: inherit;
    }
    .lll {
      border: 1px solid #555;
      outline-color: #fd9f3e;
      width: 55%;
      font-size: 1em;
      padding: 0.5em;
      line-height: inherit;

    }
    .yz {
      border: 1px solid #555;
      width: 20%;
      font-size: 1em;
      padding: 0.5em;
      line-height: inherit;
        color: white;
        text-decoration: none;
      background-image: linear-gradient(to right, #084298, #0b5ed7);
    }
    .register-top-grid {
      color: black;
      padding-bottom: 1em;
      margin: 0;
      /* text-align: center; */
      font-family: "Marvel-Regular";
      margin: 10px 0;
    }
    .text-center {
      text-align: center;
    }
    .zhuce {
      width: 180px;
      height: 60px;
      border-radius: 30px;
      background-image: linear-gradient(to right, #084298, #0b5ed7);
      border: none;
        color: #ffffff;
    }
  </style>
  <body style="width: 100%;height: 100%;background-image: url(../../static/images/index/beijing.gif);background-size: cover">
  <div class="all">

      <div class="reg">
          <div class="reg_1">
              <a href="/admin/"><button type="button" class="sig">管理员</button></a>
              <a href="/login/"><button type="button" class="sig">登入</button></a>
              <a href="/"><button type="button" class="sig">返回首页</button></a>
          </div>
      </div>
      <div class="log">
          <div>
              <div class="register" id="tiao">

                  <form method="post" action="/register/" onsubmit="return register();">
                      {% csrf_token %}
                      <div class="register-top-grid">

                          <h3>注册新用户</h3>
                          <div class="input">
                              <input class="ll"
                                     type="text"
                                      placeholder="请输入用户名"
                                      id="name"
                                      name="name"
                              />
                                <span style="color:red;" id="aSpan"></span>
                          </div>
                          <div class="input">
                              <input
                                      class="ll"
                                      type="password"
                                      placeholder="请输入密码"
                                      id="password"
                                      name="password"
                              />
                               <span style="color:red;" id="pSpan"></span>
                          </div>
                                                    <div class="input">
                              <input
                                      class="ll"
                                      type="text"
                                      placeholder="请输入邮箱"
                                      id="email"
                                      name="email"
                              /> <span style="color:red;" id="eSpan"></span>
                          </div>
                          <div class="input">
                              <input
                                      class="lll"
                                      type="text"
                                      placeholder="验证码"
                                      name="code"
                                      id="code"
                              />
                              <a class="yz" href="javascript:;" onclick="EmailCode()">发送验证码</a>
                              <span style="color:red;" id="cSpan"></span>
                          </div>
                          <div class="clearfix"></div>
                      </div>
                      <div class="text-center">
                          <input type="submit" value="注册" class="zhuce">
                      </div>
                  </form>
                  </div>
              </div>
          </div>
      </div>
  </div>
  </body>
<script>
        //邮箱格式判断
        function isEmail(str) {
            var reg = /^[a-zA-Z0-9_-]{6,}@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            return reg.test(str);
        }

        {# 用户唯一性校验 #}

        function checkUname(name) {
            var flag = false
            //返回Ture，表示这个用户名已经存在
            $.ajax({
                url: '/checkUname/',
                type: 'GET',
                async: false, //false表示同步请求，ture表示异步
                data: {"name": name},
                success: function (result) {
                    var flag2 = result.flag;
                    if (flag2) {
                        flag = true;
                        $('#aSpan').html('用户名已存在');
                    }
                }

            })
            return flag
        }

        {# 邮箱唯一性校验 #}

        function checkEmail(email) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: "/checkEmail/",
                    type: 'GET',
                    data: 'e=' + email,
                    success: function (result) {
                        if (result.flag) {
                            $('#eSpan').html('该邮箱已被绑定!!');
                            resolve(true); // 表示邮箱已被绑定
                        } else {
                            resolve(false); // 表示邮箱未被绑定
                        }
                    },
                    error: function (xhr, status, error) {
                        reject(new Error('检查邮箱时出错: ' + xhr.responseText));
                    }
                });
            });
        }
        //等待邮箱检验返回flag值在判断是否发送验证码
        async function EmailCode() {
            var email = $('#email').val();
            try {
                if (await checkEmail(email)) {
                    alert('该邮箱已被绑定');
                    return false;
                }

                $.ajax({
                    url: "/email_code/",
                    type: "GET",
                    data: 'e=' + email,
                    dataType: 'json',
                    success: function (response) {
                        if (response.message) {
                            alert(response.message);
                        }
                    },
                    error: function (xhr, status, error) {
                        alert('发送邮件验证码失败：' + xhr.responseText);
                    }
                });
            } catch (error) {
                alert('检查邮箱时发生错误: ' + error.message);
            }
        }
        //校验验证码是否正确
        function checkEcode(code,email) {
            var flag = false

            $.ajax({
                url: '/checkEcode/',
                type: 'GET',
                async: false, //false表示同步请求，ture表示异步
                data: {
                    "code": code,
                    "email":email,
                },
                success: function (result) {
                    var flag2 = result.flag;
                    if (flag2) {
                        flag = true;
                        $('#cSpan').html('验证码不正确');
                    }
                }
            })
            return flag
        }

        function register() {
            //获取输入框的值
            var name = $('#name').val()
            var email = $('#email').val();
            var password= $('#password').val();
            var code=$('#code').val()

            //简单校验
            // 用户唯一校验
            if (checkUname(name)) {
                return false;
            }
            if (name.length < 1) {
                $('#aSpan').text('用户名不能为空');
                return false;
            }
            if (password.length < 6) {
                $('#pSpan').text('密码长度不能小于六位');
                return false;
            }
            if (email.length < 6 || !isEmail(email)) {
                $('#eSpan').text('邮箱长度不能小于六位');
                return false;
            }

            if (checkEcode(code,email)){
                return false
            }

            {#var hex_pwd = hex_md5(password);#}
            {##}
            {#//var hex_pwd = hex_md5(password+time)#}
            {#$('#password').val(hex_pwd);#}

            return true;
        }

</script>
</html>